<template>
	<div class='index'>
		<view class="header">
			<view class="title">
				易货
			</view>
		</view>
		<view class="container">

			<view class="box-container" v-for="(item,index) in listDate" :key='item.id'>
				<view class="headerPart" :style="{backgroundImage:'url('+itemImg(index)+')',backgroundSize:'100%'}">
					<view class="session-name">
						{{item.name}}
					</view>

					<view class="session-time">
						<!-- 0未开始1抢购中2已结束3预约中 -->
						{{item.state==3?'距离结束':'距离开始'}}
					</view>
					<view class="timeDown">
						<countDownTime
							:targetTimestamp="item.state==3?item.appointEndTimestamp:item.state == 1?item.endTimestamp:item.state == 0?item.nextTimestamp:item.endTimestamp" />
					</view>

					<!-- <image src="@/static/static-home/image-21.png" class='icon' mode=""></image> -->
					<view class="moreText" @tap="handleMore(item)">
						更多》
					</view>
				</view>

				<view class="list-container">
					<qiangouItemBoxVue :dataItem='childItem' v-for='childItem in item.goodsList' :type='index' :state="item.state"
						:key="childItem.id" />
					<!-- <view class="products-box" v-for='childItem in ' :key='childItem.id'
						@click='handleGoQuickBuyPage'>
						<image :src="childItem.imageUrl" class='products-image' mode=""></image>
						<view class="products-title elliptical2">
							{{childItem.goodsName}}
						</view>
						<view class="products-info">
							<view class="price ">
								¥{{childItem.nowPrice}}
							</view>
							<view class="btn">
								去易货
							</view>
						</view>
					</view> -->
				</view>

			</view>
			<view class="recorded">
				<text>浙ICP备2025155851号-2A</text>
			</view>
		</view>
		
	</div>
</template>

<script>
	import {
		getSessionsList
	} from "@/api/api.js"
	import countDownTime from "@/components/basicComponents/countdown.vue"
	import qiangouItemBoxVue from '../../components/basicComponents/qiangouItemBox.vue'
	export default {
		name: 'qianggou',
		data() {
			return {
				listDate: [],
				imageList: [
					'../../static/static-home/home-6-1.png',
					'../../static/static-home/home-7-1.png',
					'../../static/static-home/home-8-1.png',
					'../../static/static-home/home-9-1.png'
				]

			}
		},
		components: {
			countDownTime,
			qiangouItemBoxVue
		},
		computed:{
			itemImg() {
				return (item) => {
					return require(`../../static/static-home/home-${item+6}-1.png`)
				}
			}
		},
		mounted() {
			this.handleGetSessionsList()
		},
		methods: {
			handleGetSessionsList() {
				getSessionsList().then(res => {
					console.log('handleGetSessionsList', res)
					if (res.code == 200) {
						this.listDate = res.data
					} else {
						this.listDate = []
					}
				})
			},
			handleMore(item) {
				let sessionList = []
				this.listDate.forEach(function(element) {
					sessionList.push({
						id: element.id,
						name: element.name
					})
				}, this);

				uni.navigateTo({
					url: "/pages/index/indexMore?sessionId=" + item.id + "&session=" + JSON.stringify(sessionList)
				})
			},

		}
	}
</script>

<style lang="less" scoped>
	page {
		width: 100%;
		min-height: 100vh;
		height: auto;
		max-height: 100%;
		background: rgb(217, 255, 130);
		background: linear-gradient(180deg, rgba(217, 255, 130, 1) 27%, rgba(166, 255, 144, 1) 100%);
		position: relative;
	}



	.index .header {
		width: 100%;
		height: 274rpx;
		background: url("@/static/static-home/image-10.png") no-repeat;
		background-size: 100% 100%;
		position: relative;
		padding: 0 40rpx;
		box-sizing: border-box;


	}

	.index .header .title {
		position: absolute;
		top: 80rpx;
		left: 40rpx;
		font-weight: bold;
		font-size: 44rpx;
		color: #3C3C3C;
	}

	.container {
		width: 100%;
		height: auto;
		
	
		padding-bottom: 100rpx;
		box-sizing: border-box;
		position: absolute;
		margin-top: -80rpx;

		.box-container {
			width: 100%;

			.headerPart {
				width: 100%;
				height: 88rpx;
				// background: url("@/static/static-home/image-45.png") no-repeat;
				// background-size: 100% 100%;
				padding: 0 20rpx;
				display: flex;
				align-items: center;
				position: relative;
				box-sizing: border-box;


				.session-name {
					font-weight: bold;
					font-size: 36rpx;
					color: #3C3C3C;
				}

				.session-time {
					font-weight: 400;
					font-size: 26rpx;
					color: #444444;
					margin-right: 8rpx;
				}

				.session-time::before {
					content: '';
					// width: 2rpx;
					// height: 20rpx;
					// background: #626262;
					display: inline-block;
					margin: 0 10rpx 0 0;
				}

				.icon {
					width: 120rpx;
					height: 120rpx;
					position: absolute;
					bottom: -36rpx;
					right: 65px;
				}

				.moreText {
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
					position: absolute;
					width: 84rpx;
					height: 32rpx;
					bottom: 50%;
					top: 50%;
					transform: translateY(-25%);
					right: 40rpx;
				}
			}

			.list-container {
				width: 100%;
				background: #fff;
				border-bottom-left-radius: 40rpx;
				border-bottom-right-radius: 40rpx;
				padding: 0 20rpx 40rpx 20rpx;
				box-sizing: border-box;
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				grid-gap: 20rpx 30rpx;
				padding-top: 20rpx;
				box-sizing: border-box;
			}
		}

		.box-container:not(:last-child) {
			margin-bottom: 40rpx;
		}
		.recorded{
			margin-top: 30rpx;
			text-align: center;
			color: #999999;
			opacity: 0.6;
			font-size: 26rpx;
			width: 100%;
		}
	}
</style>